<template>
  <div>
    <div class="head-top">
      <mt-header title="悦读">
        <router-link to="/home" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
      </mt-header>
    </div>
    <div class="main">
      <div class="home-main" v-for="(item,index) in readContentList" :key="index">
        <div class="read-box" @click="goToReadcontent(item)">
          <img :src="item.cover" alt="" width="115px" height="78px" />
          <p v-text="item.mainTitle"></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "./../../../api/api.js";
import { Indicator } from "mint-ui";
export default {
  data() {
    return {
      readContentList: []
    };
  },
  created() {
    this.datevalue = this.formatDate(new Date().getTime()); //时间
    this.getRead();
  },
  methods: {
     /**
     * 进了阅读详情
     */
    goToReadcontent(data){
      console.log(data);
      sessionStorage.setItem("readdata",JSON.stringify(data))
      this.$router.push({
        name:"readcontent"
      })
    },
    back() {
      this.$router.back(-1);
    },
    getRead() {
      Indicator.open({
        text: "拼命加载中...",
        spinnerType: "triple-bounce"
      });

      this.$http({
        method: "post",
        url: api.baseURL + "getColumResByColumnId",
        params: {
          inParam: {
            accId: 1,
            currentPage: 1,
            terminalType: 1,
            columnId: 12,
            time: this.datevalue,
            pageSize: 30,
            sysCode: "FH_PUBOPE"
          }
        }
      })
        .then(response => {
          this.readContentList = response.data.data;

          console.log(this.readContentList);

          Indicator.close();
        })
        .catch(error => {
          console.log(error);

          Indicator.close();
        });
    }
  }
};
</script>

<style scoped>
.main {
  margin-top: 20px;
}

.main a {
  color: #252525;
}

.home-main {
  width: 100%;
  height: auto;
  margin-bottom: 14px;
}

.main .read-box {
  width: 95%;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 8px;
  margin: 0 auto;
  border: 1px solid #f2f2f2;
  box-shadow: darkgrey 1px 1px 5px;
}

.main .read-box img {
  margin: 10px 0;
  margin-left: 10px;
  font-size: 15px;
}

.main .read-box p {
  margin-left: 22px;
  padding-right: 16px;
}
</style>